<template>
  <div class="masterdata-overview p-4">
    <!-- 顶部横幅 -->
    <div class="overview-banner mb-6 bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-lg shadow-lg p-6">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold mb-2">主数据概况</h1>
          <p class="opacity-80">统计周期：{{ formatDate(new Date()) }}</p>
        </div>
        <div class="flex space-x-4">
          <el-button type="primary" plain @click="refreshData">
            <div class="i-carbon-renew mr-1"></div>刷新数据
          </el-button>
          <el-button type="primary" plain @click="exportData">
            <div class="i-carbon-export mr-1"></div>导出报表
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="overview-stats grid grid-cols-4 gap-4 mb-6">
      <el-card shadow="hover" class="stat-card hover:translate-y-[-3px] transition-all duration-300">
        <div class="flex items-center">
          <div class="i-carbon-data-base text-5xl text-blue-500 mr-4"></div>
          <div>
            <div class="text-3xl font-bold">{{ totalStats.entities }}</div>
            <div class="text-gray-500">实体总数</div>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card hover:translate-y-[-3px] transition-all duration-300">
        <div class="flex items-center">
          <div class="i-carbon-document text-5xl text-green-500 mr-4"></div>
          <div>
            <div class="text-3xl font-bold">{{ totalStats.records }}</div>
            <div class="text-gray-500">数据记录数</div>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card hover:translate-y-[-3px] transition-all duration-300">
        <div class="flex items-center">
          <div class="i-carbon-folder text-5xl text-orange-500 mr-4"></div>
          <div>
            <div class="text-3xl font-bold">{{ totalStats.categories }}</div>
            <div class="text-gray-500">数据分类数</div>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card hover:translate-y-[-3px] transition-all duration-300">
        <div class="flex items-center">
          <div class="i-carbon-chart-column text-5xl text-purple-500 mr-4"></div>
          <div>
            <div class="text-3xl font-bold">{{ totalStats.attributes }}</div>
            <div class="text-gray-500">属性总数</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container grid grid-cols-2 gap-6 mb-6">
      <!-- 数据增长趋势图 -->
      <div class="card art-custom-card">
        <div class="card-header">
          <div class="flex justify-between items-center">
            <span class="font-bold">主数据增长趋势</span>
            <el-radio-group v-model="trendTimeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <ArtLineChart
          :data="[170, 182, 191, 234, 290, 330, 310]"
          :xAxisData="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
          :showAreaColor="true"
        />
      </div>

      <!-- 数据分布图 -->
      <div class="card art-custom-card">
        <div class="card-header">
          <div class="flex justify-between items-center">
            <span class="font-bold">主数据分布情况</span>
            <el-select v-model="distributionType" size="small" placeholder="请选择">
              <el-option label="按数据域分布" value="domain"></el-option>
              <el-option label="按实体类型分布" value="entity"></el-option>
            </el-select>
          </div>
        </div>
        <ArtRingChart
          :data="[
            { value: 5235, name: '学生域' },
            { value: 2548, name: '教学域' },
            { value: 1896, name: '教师域' },
            { value: 1254, name: '科研域' },
            { value: 845, name: '资产域' },
            { value: 765, name: '财务域' },
            { value: 425, name: '其他' }
          ]"
          :color="['#4C87F3', '#93F1B4', '#8BD8FC', '#FFA87D', '#A78BFA', '#FB7185', '#94A3B8']"
        />
      </div>
    </div>
    
    <!-- 详细指标卡片 -->
    <div class="stats-cards mb-6">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="(card, index) in statsCards" :key="index">
          <ArtStatsCard
            :icon="card.icon"
            :count="card.count"
            :description="card.description"
            :iconSize="card.iconSize"
            iconColor="#fff"
            :iconBgColor="card.iconBgColor"
            :showArrow="card.showArrow"
          />
        </el-col>
      </el-row>
    </div>
    
    <!-- 图表卡片区域 -->
    <div class="chart-cards mb-6">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <ArtLineChartCard
            :value="2545"
            label="新增实体"
            :percentage="1.2"
            :height="11"
            :chartData="[120, 132, 101, 134, 90, 230, 210]"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <ArtBarChartCard
            :value="15480"
            label="数据更新量"
            :percentage="-4.15"
            :height="11"
            :chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <ArtLineChartCard
            :value="12568"
            label="数据访问量"
            :percentage="8.5"
            :height="11"
            :showAreaColor="true"
            :chartData="[150, 180, 160, 200, 180, 220, 240]"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <ArtDonutChartCard
            :value="12968"
            title="数据总量"
            :percentage="5.2"
            :data="[70, 30]"
            :height="11"
            currentYear="本期"
            previousYear="上期"
          />
        </el-col>
      </el-row>
    </div>
    
    <!-- 数据质量进度卡片 -->
    <div class="progress-cards mb-6">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="(metric, index) in qualityMetrics" :key="index">
          <ArtProgressCard
            :percentage="metric.score"
            :title="metric.name"
            :color="getProgressColor(metric.score)"
            :icon="metric.icon"
            :iconColor="metric.iconColor"
            :iconBgColor="metric.iconBgColor"
            :iconSize="20"
          />
        </el-col>
      </el-row>
    </div>
    
    <!-- 分析图表区域 -->
    <div class="chart-analysis grid grid-cols-2 gap-6 mb-6">
      <!-- 数据质量分析 -->
      <div class="card art-custom-card">
        <div class="card-header">
          <div class="flex justify-between items-center">
            <span class="font-bold">数据质量分析</span>
            <el-select v-model="dataQualityPeriod" size="small" placeholder="选择时间段">
              <el-option label="最近7天" value="7days"></el-option>
              <el-option label="最近30天" value="30days"></el-option>
              <el-option label="最近90天" value="90days"></el-option>
            </el-select>
          </div>
        </div>
        <ArtLineChart
          :data="[85, 87, 90, 93, 92, 95]"
          :xAxisData="['1月', '2月', '3月', '4月', '5月', '6月']"
        />
      </div>
      
      <!-- 数据操作分析 -->
      <div class="card art-custom-card">
        <div class="card-header">
          <div class="flex justify-between items-center">
            <span class="font-bold">数据操作分析</span>
            <el-radio-group v-model="dataOperationTab" size="small">
              <el-radio-button label="created">新增</el-radio-button>
              <el-radio-button label="updated">更新</el-radio-button>
              <el-radio-button label="deleted">删除</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <ArtBarChart
          :data="getOperationData(dataOperationTab)"
          :xAxisData="['学生域', '教学域', '教师域', '科研域', '资产域', '财务域']"
        />
      </div>
    </div>
    
    <!-- 最近活动列表 -->
    <div class="list-cards mb-6">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8">
          <ArtDataListCard :list="recentActivities" title="最近活动" subtitle="主数据操作记录" :maxCount="5" />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <ArtDataListCard :list="todoItems" title="待办事项" subtitle="需要处理的任务" :maxCount="5" />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <ArtTimelineListCard :list="timelineData" title="最近数据变更" subtitle="近期数据变更记录" />
        </el-col>
      </el-row>
    </div>

    <!-- 数据质量告警 -->
    <el-card shadow="hover">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-bold">数据质量告警</span>
          <el-button-group>
            <el-button type="primary" size="small" plain>处理全部</el-button>
            <el-button type="primary" size="small" plain>导出</el-button>
          </el-button-group>
        </div>
      </template>
      <el-empty v-if="alarmList.length === 0" description="暂无告警信息"></el-empty>
      <div v-else class="alarm-list">
        <el-timeline>
          <el-timeline-item
            v-for="(alarm, index) in alarmList"
            :key="index"
            :type="getAlarmType(alarm.level)"
            :timestamp="alarm.time"
            :hollow="alarm.status === 'resolved'"
          >
            <el-card>
              <h4 class="flex items-center">
                <el-tag :type="getAlarmType(alarm.level)" class="mr-2">{{ alarm.level }}</el-tag>
                {{ alarm.title }}
              </h4>
              <p class="text-gray-500 mt-2">{{ alarm.message }}</p>
              <div class="mt-2 flex justify-end">
                <el-button type="primary" size="small" text>查看详情</el-button>
                <el-button type="success" size="small" text v-if="alarm.status !== 'resolved'">标记为已解决</el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
// 导入图表卡片组件
import ArtLineChartCard from '@/components/core/cards/ArtLineChartCard.vue'
import ArtBarChartCard from '@/components/core/cards/ArtBarChartCard.vue'
import ArtDonutChartCard from '@/components/core/cards/ArtDonutChartCard.vue'
import ArtLineChart from '@/components/core/charts/ArtLineChart.vue'
import ArtBarChart from '@/components/core/charts/ArtBarChart.vue'
import ArtRingChart from '@/components/core/charts/ArtRingChart.vue'
import ArtStatsCard from '@/components/core/cards/ArtStatsCard.vue'
import ArtProgressCard from '@/components/core/cards/ArtProgressCard.vue'
import ArtDataListCard from '@/components/core/cards/ArtDataListCard.vue'
import ArtTimelineListCard from '@/components/core/cards/ArtTimelineListCard.vue'

const router = useRouter()

// 总体统计数据
const totalStats = reactive({
  entities: 243,
  records: 12968,
  categories: 27,
  attributes: 523
})

// 图表引用
const trendChartRef = ref()
const distributionChartRef = ref()
const qualityChartRef = ref()
const operationChartRef = ref()
let trendChart: echarts.ECharts | null = null
let distributionChart: echarts.ECharts | null = null
let qualityChart: echarts.ECharts | null = null
let operationChart: echarts.ECharts | null = null

// 趋势图时间范围
const trendTimeRange = ref('month')

// 分布图类型
const distributionType = ref('domain')

// 数据质量指标
const qualityMetrics = ref([
  { 
    name: '完整性', 
    score: 92, 
    icon: '&#xe812;',
    iconColor: 'rgb(var(--art-primary))', 
    iconBgColor: 'rgb(var(--art-bg-primary))'
  },
  { 
    name: '准确性', 
    score: 88, 
    icon: '&#xe724;',
    iconColor: 'rgb(var(--art-warning))', 
    iconBgColor: 'rgb(var(--art-bg-warning))'
  },
  { 
    name: '一致性', 
    score: 95, 
    icon: '&#xe70e;',
    iconColor: 'rgb(var(--art-success))', 
    iconBgColor: 'rgb(var(--art-bg-success))'
  },
  { 
    name: '及时性', 
    score: 87, 
    icon: '&#xe82d;',
    iconColor: 'rgb(var(--art-error))', 
    iconBgColor: 'rgb(var(--art-bg-error))'
  },
  { 
    name: '唯一性', 
    score: 96, 
    icon: '&#xe72f;',
    iconColor: 'rgb(var(--art-secondary))', 
    iconBgColor: 'rgb(var(--art-bg-secondary))'
  }
])

// 数据质量分析周期
const dataQualityPeriod = ref('30days')

// 数据操作分析标签页
const dataOperationTab = ref('created')

// 统计卡片数据
const statsCards = [
  {
    icon: '&#xe812;',
    count: totalStats.entities,
    description: '实体总数',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-info))',
    showArrow: false
  },
  {
    icon: '&#xe724;',
    count: totalStats.records,
    description: '数据记录数',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    showArrow: false
  },
  {
    icon: '&#xe70e;',
    count: totalStats.categories,
    description: '数据分类数',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    showArrow: false
  },
  {
    icon: '&#xe82d;',
    count: totalStats.attributes,
    description: '属性总数',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-error))',
    showArrow: false
  }
]

// 最近活动列表
const recentActivities = [
  {
    title: '新增学生基本数据',
    status: '已完成',
    time: '10分钟前',
    class: 'bg-success',
    icon: '&#xe6f2;'
  },
  {
    title: '更新教师信息数据',
    status: '已完成',
    time: '1小时前',
    class: 'bg-primary',
    icon: '&#xe806;'
  },
  {
    title: '检查数据一致性',
    status: '进行中',
    time: '2小时前',
    class: 'bg-warning',
    icon: '&#xe6fb;'
  },
  {
    title: '删除过期数据',
    status: '已完成',
    time: '昨天',
    class: 'bg-danger',
    icon: '&#xe813;'
  },
  {
    title: '数据备份',
    status: '已完成',
    time: '2天前',
    class: 'bg-success',
    icon: '&#xe70c;'
  }
]

// 待办事项
const todoItems = [
  {
    title: '清理冗余数据',
    status: '待处理',
    time: '今天',
    class: 'bg-primary',
    icon: '&#xe812;'
  },
  {
    title: '合并重复数据',
    status: '待处理',
    time: '今天',
    class: 'bg-secondary',
    icon: '&#xe806;'
  },
  {
    title: '审核数据变更',
    status: '待处理',
    time: '明天',
    class: 'bg-warning',
    icon: '&#xe6fb;'
  },
  {
    title: '更新数据字典',
    status: '待处理',
    time: '明天',
    class: 'bg-danger',
    icon: '&#xe813;'
  },
  {
    title: '优化数据结构',
    status: '待处理',
    time: '本周',
    class: 'bg-success',
    icon: '&#xe70c;'
  }
]

// 时间线数据
const timelineData = [
  {
    time: '10:30',
    status: 'rgb(73, 190, 255)',
    content: '新增学生数据152条'
  },
  {
    time: '14:05',
    status: 'rgb(54, 158, 255)',
    content: '更新教师数据',
    code: 'MD-3467'
  },
  {
    time: '昨天',
    status: 'rgb(103, 232, 207)',
    content: '新增课程数据37条'
  },
  {
    time: '前天',
    status: 'rgb(255, 193, 7)',
    content: '系统维护更新',
    code: 'MT-2023'
  },
  {
    time: '上周',
    status: 'rgb(255, 105, 105)',
    content: '删除过期数据',
    code: 'OR-9876'
  },
  {
    time: '上周',
    status: 'rgb(103, 232, 207)',
    content: '完成数据审核'
  }
]

// 热门主数据
const hotDataList = ref([
  { name: '学生基本数据子类表', accessCount: 2458, updateCount: 352, recordCount: 4045, lastUpdateTime: '2023-06-15 10:30:45' },
  { name: '学籍基本数据子类表', accessCount: 1865, updateCount: 286, recordCount: 3931, lastUpdateTime: '2023-06-14 15:22:18' },
  { name: '社团（协会）辅助数据类表', accessCount: 1253, updateCount: 178, recordCount: 999, lastUpdateTime: '2023-06-10 09:15:32' },
  { name: '项目基本数据子类表', accessCount: 986, updateCount: 123, recordCount: 174, lastUpdateTime: '2023-06-05 14:45:21' },
  { name: '变学年数据子类表', accessCount: 754, updateCount: 98, recordCount: 149, lastUpdateTime: '2023-05-28 11:10:36' }
])

// 告警列表
const alarmList = ref([
  { level: '严重', title: '学生基本数据完整性告警', message: '存在152条数据缺少必要的联系方式信息', time: '2023-06-15 09:30:25', status: 'unresolved' },
  { level: '警告', title: '教师信息数据一致性告警', message: '发现25条数据与人事系统数据不一致', time: '2023-06-14 15:45:12', status: 'unresolved' },
  { level: '提示', title: '课程数据更新延迟', message: '课程信息数据与源系统同步延迟超过30分钟', time: '2023-06-10 11:20:45', status: 'resolved' }
])

// 初始化
onMounted(() => {
  initTrendChart()
  initDistributionChart()
  initQualityChart()
  initOperationChart()
  
  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', handleResize)
})

// 清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  trendChart?.dispose()
  distributionChart?.dispose()
  qualityChart?.dispose()
  operationChart?.dispose()
})

// 初始化趋势图
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  trendChart = echarts.init(trendChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增实体', '更新实体', '数据记录量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增实体',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#409EFF'
        },
        data: [12, 15, 8, 10, 7, 5, 14]
      },
      {
        name: '更新实体',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#67C23A'
        },
        data: [30, 25, 35, 40, 35, 20, 30]
      },
      {
        name: '数据记录量',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#E6A23C'
        },
        areaStyle: {
          opacity: 0.2
        },
        data: [820, 932, 901, 934, 1290, 830, 1330]
      }
    ]
  }
  
  trendChart.setOption(option)
}

// 初始化分布图
const initDistributionChart = () => {
  if (!distributionChartRef.value) return
  
  distributionChart = echarts.init(distributionChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: ['学生域', '教学域', '教师域', '科研域', '资产域', '财务域', '其他']
    },
    series: [
      {
        name: '数据分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 5235, name: '学生域' },
          { value: 2548, name: '教学域' },
          { value: 1896, name: '教师域' },
          { value: 1254, name: '科研域' },
          { value: 845, name: '资产域' },
          { value: 765, name: '财务域' },
          { value: 425, name: '其他' }
        ]
      }
    ]
  }
  
  distributionChart.setOption(option)
}

// 初始化数据质量分析图表
const initQualityChart = () => {
  if (!qualityChartRef.value) return
  
  qualityChart = echarts.init(qualityChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['完整性', '准确性', '一致性', '及时性', '唯一性']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value',
      min: 50,
      max: 100,
      interval: 10
    },
    series: [
      {
        name: '完整性',
        type: 'line',
        data: [85, 87, 90, 93, 92, 95],
        smooth: true
      },
      {
        name: '准确性',
        type: 'line',
        data: [80, 82, 85, 89, 88, 88],
        smooth: true
      },
      {
        name: '一致性',
        type: 'line',
        data: [90, 92, 94, 96, 95, 95],
        smooth: true
      },
      {
        name: '及时性',
        type: 'line',
        data: [75, 82, 83, 80, 85, 87],
        smooth: true
      },
      {
        name: '唯一性',
        type: 'line',
        data: [90, 91, 93, 94, 95, 96],
        smooth: true
      }
    ]
  }
  
  qualityChart.setOption(option)
}

// 初始化数据操作分析图表
const initOperationChart = () => {
  if (!operationChartRef.value) return
  
  operationChart = echarts.init(operationChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['学生域', '教学域', '教师域', '科研域', '资产域', '财务域']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增数据',
        type: 'bar',
        data: [320, 280, 180, 210, 120, 160],
        barWidth: '40%',
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  }
  
  operationChart.setOption(option)
}

// 窗口大小变化处理
const handleResize = () => {
  trendChart?.resize()
  distributionChart?.resize()
  qualityChart?.resize()
  operationChart?.resize()
}

// 监听数据质量周期变化
watch(dataQualityPeriod, () => {
  nextTick(() => {
    initQualityChart()
  })
})

// 监听数据操作标签页变化
watch(dataOperationTab, (newValue) => {
  nextTick(() => {
    updateOperationChart(newValue)
  })
})

// 更新操作图表数据
const updateOperationChart = (type: string) => {
  if (!operationChart) return
  
  let seriesData: number[] = []
  let seriesName = ''
  let seriesColor = ''
  
  switch (type) {
    case 'created':
      seriesData = [320, 280, 180, 210, 120, 160]
      seriesName = '新增数据'
      seriesColor = '#409EFF'
      break
    case 'updated':
      seriesData = [520, 480, 350, 410, 230, 260]
      seriesName = '更新数据'
      seriesColor = '#67C23A'
      break
    case 'deleted':
      seriesData = [120, 110, 90, 85, 50, 60]
      seriesName = '删除数据'
      seriesColor = '#F56C6C'
      break
  }
  
  operationChart.setOption({
    series: [
      {
        name: seriesName,
        data: seriesData,
        itemStyle: {
          color: seriesColor
        }
      }
    ]
  })
}

// 获取进度条颜色
const getProgressColor = (score: number) => {
  if (score >= 90) return '#67C23A'
  if (score >= 80) return '#E6A23C'
  return '#F56C6C'
}

// 获取告警类型
const getAlarmType = (level: string) => {
  if (level === '严重') return 'danger'
  if (level === '警告') return 'warning'
  return 'info'
}

// 获取操作数据
const getOperationData = (type: string) => {
  switch (type) {
    case 'created':
      return [320, 280, 180, 210, 120, 160]
    case 'updated':
      return [520, 480, 350, 410, 230, 260]
    case 'deleted':
      return [120, 110, 90, 85, 50, 60]
    default:
      return [320, 280, 180, 210, 120, 160]
  }
}

// 格式化日期
const formatDate = (date: Date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 刷新数据
const refreshData = () => {
  // 模拟刷新操作
  ElMessage.success('数据已刷新')
}

// 导出数据
const exportData = () => {
  // 模拟导出操作
  ElMessage.success('数据导出成功')
}

// 查看全部数据
const viewAllData = () => {
  router.push('/masterdata/manage')
}
</script>

<style scoped lang="scss">
.masterdata-overview {
  .overview-banner {
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 200%;
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 75%,
        transparent
      );
      background-size: 20px 20px;
      transform: rotate(25deg);
      z-index: 1;
    }
  }
  
  .card {
    padding: 20px;
    background-color: var(--art-main-bg-color);
    border-radius: var(--custom-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    
    .card-header {
      padding-bottom: 15px;
      font-size: 16px;
      font-weight: 500;
    }
  }
  
  .el-col {
    margin-bottom: 20px;
  }
  
  .chart-container {
    .art-custom-card {
      height: 350px;
    }
  }
  
  .chart-analysis {
    .art-custom-card {
      height: 350px;
    }
  }
  
  .alarm-list {
    max-height: 400px;
    overflow-y: auto;
  }
  
  :deep(.el-card__header) {
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-progress-dashboard__inner) {
    text-align: center;
  }
}
</style>